<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/lib/sockjs/sockjs.min.js"></script>
<script type="text/javascript" src="scripts/lib/sockjs/stomp.js"></script>
<script type="text/javascript">
	var register = function(userId){
		var url = 'http://localhost:8080/websocket/ws';
			var socket = new SockJS(url, undefined, {protocols_whitelist: ['websocket']});
			var stompClient = Stomp.over(socket);
			stompClient.connect({}, function(frame) {
				stompClient.subscribe('/topic/hello', function(message){
					console.log('topic');
					console.log(message);
					$('#receive').val(message);
					var json = JSON.parse(message.body);
				});

				 stompClient.subscribe('/user/' + userId + '/message', function(message){
						console.log('message')
					 console.log(message);
					 var messageEntity = JSON.parse(message.body);
					$('#receive').val(messageEntity);
				});
			});
	}
	$(function(){
		register('123');
		$('#btn').click(function(){
			var message = 
				$('#message').val();
			$.getJSON('/websocket/chat?message='+message, function(data){
				console.log('query done.');
			});
		});
	});
</script>
<body>
	<input type="text" id="message" />
	<br />
	<button id="btn">send message</button>
	<hr />
	receive from server
	<input type="text" id="receive" />
	<br />

</body>
</html>